<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head>
    <meta charset="utf-8">
    <title>轮播图片和视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link th:href="@{/ajax/libs/swiper-4.4.6/css/swiper.css}" rel="stylesheet"/>
    <style type="text/css">
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: white;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
            color: white;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
        }

        video {
            object-fit: cover;
        }

        img, video {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper" id="swiperBox">
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/ajax/libs/swiper-4.4.6/js/swiper.js}"></script>
<!-- Initialize Swiper -->
<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        var prefix = ctx + "system/files";
        window.onload = function () {
            var md;
            var utils = {
                state: {
                    picTime: 2,// 图片时间
                    textTime: 2,// 文字时间
                    data: [],
                },
                countDown: function (count, callback) {
                    var times = setInterval(function () {
                        if (count > 0) {
                            count--;
                        } else {
                            clearInterval(times)
                            if (callback) callback();
                        }

                    }, 1000);
                },
                picEle: function (data = {}, index) {
                    // var urls = "/profile/" +  "${data.fileName}" +"." +"${data.suffix}";
                    return `<div class="swiper-slide" style="background: white"><img src="${data.url}" alt=""></div>`;
                },
                videoEle: function (data = {}, index) {
                    //var urls = "/profile/" +  "${data.fileName}" +"." +"${data.suffix}";
                    return `<div class="swiper-slide" style="background: white">
                    <video id="media${index}" class="media${index}" width="100%" height="100%" muted>
                      <source src="${data.url}">
                    </video>
                  </div>`;
                },
                textEle: function (data = {}, index) {
                    return `<div class="swiper-slide" style="background: blue">
                  ${data.content}
                </div>`;
                },
                getChildEle: function (data = []) {
                    var childEle = '';
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].type == 0) {
                            childEle += utils.picEle(data[i]);
                        } else if (data[i].type == 1) {

                            childEle += utils.videoEle(data[i], i);
                        } else if (data[i].type == 2) {

                            childEle += utils.textEle(data[i]);
                        }
                    }
                    return childEle;
                },
                getListData: function () {
                    $.ajax({
                        url: prefix + "/listOrder?channelId=" + 2,
                        type: "get",
                        async: false,//同步
                        data: {},//传出的数据
                        dataType: "json",//返回的数据类型，常用：html/text/json
                        success: function (data) {
                            utils.state.data = data.rows;
                            var parentEle = document.getElementById("swiperBox");
                            parentEle.innerHTML = utils.getChildEle(utils.state.data);
                        }
                    })
                },
                // mockListData: function(){
                //   utils.state.data = [
                //       {
                //         "searchValue": null,
                //         "createBy": null,
                //         "createTime": null,
                //         "updateBy": null,
                //         "updateTime": null,
                //         "remark": "",
                //         "params": {},
                //         "id": 1,
                //         "fileName": "图片1",
                //         "type": 0,
                //         "ur": "http://img3.duitang.com/uploads/item/201608/13/20160813093241_UiKmA.jpeg",
                //         "content": "",
                //         "order": 1
                //       },
                //       {
                //         "searchValue": null,
                //         "createBy": null,
                //         "createTime": null,
                //         "updateBy": null,
                //         "updateTime": null,
                //         "remark": "",
                //         "params": {},
                //         "id": 1,
                //         "fileName": "图片1",
                //         "type": 0,
                //         "ur": "https://b-ssl.duitang.com/uploads/item/201505/23/20150523152813_r28Vk.jpeg",
                //         "content": "",
                //         "order": 1
                //       },
                //       {
                //         "searchValue": null,
                //         "createBy": null,
                //         "createTime": null,
                //         "updateBy": null,
                //         "updateTime": null,
                //         "remark": "",
                //         "params": {},
                //         "id": 3,
                //         "fileName": "视频1",
                //         "type": 1,
                //         "ur": "http://www.w3school.com.cn/example/html5/mov_bbb.ogg",
                //         "content": "",
                //         "order": 3
                //       },
                //       {
                //         "searchValue": null,
                //         "createBy": null,
                //         "createTime": null,
                //         "updateBy": null,
                //         "updateTime": null,
                //         "remark": "",
                //         "params": {},
                //         "id": 1,
                //         "fileName": "图片1",
                //         "type": 0,
                //         "ur": "http://b-ssl.duitang.com/uploads/item/201410/03/20141003171521_uPuJN.thumb.700_0.jpeg",
                //         "content": "",
                //         "order": 1
                //       },
                //   ]
                //   var parentEle = document.getElementById("swiperBox");
                //   parentEle.innerHTML = utils.getChildEle(utils.state.data);
                // }
            };

            utils.getListData();

            var mySwiper = new Swiper('.swiper-container', {
                spaceBetween: 30,
                effect: 'fade',
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项
                width: window.innerWidth,
                height: window.innerHeight,
                on: {
                    init: function () {
                        //Swiper初始化了
                        document.body.click();
                        document.body.click();
                    },
                    slideChangeTransitionEnd: function () {
                        document.body.click();
                        document.body.click();
                        this.myActiveIndex = this.activeIndex > utils.state.data.length ? 1 : this.activeIndex;
                        if (utils.state.data[this.myActiveIndex - 1].type == 0) {
                            utils.countDown(utils.state.picTime, function () {
                                mySwiper.slideNext()
                            });

                        } else if (utils.state.data[this.myActiveIndex - 1].type == 1) {
                            // md = document.getElementById("media" + (this.myActiveIndex-1));
                            console.log(this.activeIndex)
                            console.log(utils.state.data.length)
                            if (this.activeIndex >= utils.state.data.length) {
                                md1 = document.querySelectorAll(`.media${this.myActiveIndex - 1}`)[1];
                                md1.currentTime = 0;
                                md1.removeAttribute('muted')
                                md1.play();
                                md1.addEventListener("ended", function () {
                                    md1.currentTime = 0;
                                    mySwiper.slideNext();
                                })
                            } else {
                                md = document.querySelectorAll(`.media${this.myActiveIndex - 1}`)[0];
                                md.currentTime = 0;
                                md.removeAttribute('muted')
                                md.play();
                                md.addEventListener("ended", function () {
                                    md.currentTime = 0;
                                    mySwiper.slideNext();
                                })
                            }

                        } else if (utils.state.data[this.myActiveIndex - 1].type == 2) {
                            utils.countDown(utils.state.textTime, function () {
                                mySwiper.slideNext()
                            })

                        } else {
                            utils.countDown(utils.state.picTime, function () {
                                mySwiper.slideNext()
                            })

                        }
                    },
                },
            });
        }
</script>
</body>
</html>